<template>
  <div class="home">
    <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="极简打分" left-arrow
      @click-left="$router.go(-1)" />
    <div class="allScore">
      <div class="topScore" v-if="cachShow">
        <div class="topTit">
          <p>功能价值</p>
          <div class="noCach" @click="noCachs">
            <van-icon name="cross" />
          </div>
        </div>
        <div class="middScore">
          <ul>
            <li>·自主创建打分器，交给裁判使用</li>
            <li>·支持battle/齐舞等多种模式，10s快速处分</li>
          </ul>
        </div>
        <div class="botScore">
          <div class="plays"><van-icon name="play" style="margin-right:.2rem" />00:34</div>
          <div class="lookTut">查看教程<van-icon name="arrow" /></div>
        </div>
      </div>
      <van-tabs v-model="activeName" style="margin-bottom:.3rem">
        <van-tab title="正式版"></van-tab>
        <van-tab title="免费版"></van-tab>
      </van-tabs>
      <div class="scoreList">
        <div class="scoreItem" v-for="(item, index) in list" :key="index">
          <div class="itemTops">
            <div :class="['rigLab', 'itemState' + (item.status + 1)] ">
              {{ statusData[item.status] }}
            </div>
            <p class="itemTit">
              {{item.name}}
            </p>
            <p class="itemTxt">
              {{item.activityTitle}}
            </p>
            <p class="itemTxt">
              {{item.activityAddress}}
            </p>
          </div>
          <div class="itemBtn">
            <van-button style="width:100%;border-radius:.1rem" @click="toBoard(item)" color="#2e2e46">打分看板</van-button>
          </div>
        </div>
      </div>
    </div>
    <div class="homeBtn">
      <van-button style="width:49%;height:7.5vh;border-radius:.3rem"
        color="linear-gradient(to right, #b267f4, #6953f7)">免费体验(30min)</van-button>
      <van-button style="width:49%;height:7.5vh;border-radius:.3rem"
        color="linear-gradient(to right, #5c79f7, #5c74f4)">正式创建(14d)</van-button>
    </div>
  </div>
</template>

<script>
import {scoreProjectPage} from '@/apis/score'
export default {
  data() {
    return {
      activeName: 1,
      cachShow: true,
      list:[],
      statusData: ['未开始', '进行中', '已结束', '已过期']
    }
  },
  methods: {
    noCachs() {
      this.cachShow = false
    },
    async scoreProjectPage(){
      const res = await scoreProjectPage()
      console.log(res)
      this.list = res.result.data
    },
    toBoard(item) {
      this.$router.push({
        path: '/scoring/scoringBoard',
        query: {
          id:item.id,
          activityTitle: item.activityTitle,
				name: item.name,
				ticketName: item.ticketName,
        sponsorAvatar: item.sponsorAvatar,
        sponsorName: item.sponsorName
        }
      })
    }
  },
  mounted(){
    this.scoreProjectPage()
  }
}
</script>

<style lang="less" scoped>
.home {
  color: #fff;
  font-size: .3rem;
  padding: .25rem;
}

.topScore {
  background: #363650;
  padding: .2rem .3rem;
  border-radius: .2rem;
  border: 1px solid #434263;

  .topTit {
    display: flex;
    justify-content: space-between;
    margin-bottom: .1rem;

    .noCach {
      width: .5rem;
      height: .5rem;
      text-align: center;
      line-height: .5rem;
      border-radius: .2rem;
      background: #3e3f5c;
    }
  }

  .middScore {
    font-size: .25rem;
    line-height: .45rem;
    margin-bottom: .3rem;
  }

  .botScore {
    display: flex;
    justify-content: space-between;
    font-size: .25rem;
  }
}

.scoreList {
  .scoreItem {
    background: #363650;
    border-radius: .2rem;
    position: relative;
    overflow: hidden;

    .itemTops {
      padding: .4rem .3rem .3rem;

      .rigLab {
        position: absolute;
        padding: .1rem;
        font-size: .23rem;
        border-radius: .02rem .2rem .02rem .2rem;
        top: 0;
        right: 0;
      }
      .itemState1{
        background: #5854FF;
        color: #fff;
      }
      .itemState2{
        background: #DBA42E;
        color: #fff;
      }
      .itemState3{
        background: #0F7A71;
        color: #4FFFAA;
      }
      .itemState4{
        background: #6F6F93;
        color: #BDBDDB;
      }

      .itemTit {
        margin-bottom: .25rem;
      }

      .itemTxt {
        margin-bottom: .1rem;
        font-size: .25rem;
        color: #a2a2bc;
      }
    }

    .itemBtn {
      background: #232136;
      width: 100%;
      padding: .2rem;

    }
  }

  .itemBtn {
    ::v-deep .van-button {
      color: #4682d2 !important
    }
  }
}

.homeBtn {
  background: #27283d;
  height: 12vh;
  padding: 0 .2rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep .van-tabs__nav {
  background: #1e1e35;
}

::v-deep .van-tab {
  color: #fff;
}

::v-deep .van-tabs__line {
  background: #fff;
  width: .4rem;
}</style>